import QtQuick 1.0

Rectangle {
    id: menuContener
    width: parent.width
    height: parent.height
    color: "#AA111111"
    anchors.centerIn: parent

    Image{
        id: menu
        width: parent.width * 0.75
        height: parent.height * 0.75
        anchors.centerIn: parent
        fillMode: Image.Tile
        source: ":/images/brick.jpg"

        Rectangle{
            id: descriptionArea
            width: parent.width - 50
            height: parent.height * 0.25
            anchors.left: menu.left
            anchors.top: menu.top
            anchors.leftMargin: 25
            anchors.topMargin: 25
            color: "white"
            border.color: "darkgray"
            border.width: 10

            TextEdit {
                id: description
                width: parent.width - 25
                height: parent.height - 25
                anchors.centerIn: parent
                text: ""
                readOnly: true
                font.pixelSize: 66
                color: "black"
            }
        }

        ListView{
            id: levelView
            width: parent.width - 25
            height: parent.height - 75 - descriptionArea.height
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: descriptionArea.bottom
            anchors.topMargin: 25
            model: LevelModel
            delegate: levelDelegate
            clip: true
            currentIndex: -1
            highlight: levelHighlight
        }
    }

    Component{
        id: levelDelegate
        Item{
            id: levelDelegateItem

            width: parent.width
            height: 250

            MouseArea{
                anchors.fill: parent
                onClicked:{
                    description.text = level_long_desc
                    levelView.currentIndex = index
                }
            }

            Rectangle{
                anchors.centerIn: parent

                width: parent.width * 0.9
                height: parent.height * 0.9

                color: "#AA111111"

                Text{
                    id: itemName
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    text: level_type + ":" + level_name
                    font.bold: true
                    font.pixelSize: 66
                    color: level_unlocked?"steelblue":"darkred"
                }

                Text{
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: buyButton.left
                    anchors.rightMargin: 35
                    text: level_price
                    font.bold: true
                    font.pixelSize: 66
                    color: "white"
                    visible: !level_unlocked
                }

                Rectangle{
                    id: loadButton
                    height: parent.height - 50
                    width: parent.width * 0.25
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 25
                    border.color: "white"
                    border.width: 10
                    color: "darkblue"
                    visible: level_unlocked
                    Text {
                        anchors.centerIn: parent
                        text: "Load"
                        font.bold: true
                        font.pixelSize: 88
                        color: "white"
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: LevelController.load(index)
                    }
                }

                Rectangle{
                    id: buyButton
                    height: parent.height - 50
                    width: parent.width * 0.25
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 25
                    border.color: "white"
                    border.width: 10
                    color: "darkgreen"
                    visible: !level_unlocked
                    Text {
                        anchors.centerIn: parent
                        text: "Buy"
                        font.bold: true
                        font.pixelSize: 88
                        color: "white"
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: LevelController.buy(index)
                    }
                }
            }
        }
    }

    Component{
        id: levelHighlight
        Item{
            width: parent.width
            height: 250
            Rectangle{
                width: parent.width * 0.9
                height: parent.height * 0.9
                color: "transparent"
                border.color: "forestgreen"
                border.width: 10
                anchors.centerIn: parent
            }
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                    velocity: 80
                }
            }
        }
    }
}
